<template>
  <div class="locus-view">
    <!-- 地图 -->
    <lb-mapbox v-if="isRouterAlive" class="mapbox"></lb-mapbox>
    <!-- 信息框 -->
    <div v-if="$store.state.isMessageDisplay" class="message" id="m1">
      <strong>总里程: {{ $store.state.kilometer}} 公里</strong>
    </div>

    <!-- 事件轮播 -->
    <div class="messageContainer">
      <div ref="messageBox" class="messageBox" v-if="$store.state.isMessageDisplay">
        <div v-for="item in eventsList" :key="item">
          <strong>公元{{ item.time }}年,时{{ item.year }},李白{{ age }}岁</strong>
          <br/><br/>
          <strong>{{ item.things}}</strong>
        </div>
      </div>
    </div>

    <!-- 诗词轮播 -->
    <lb-Bar style="position: absolute;top: 30%;left:3%;width: 30%;height:35%;"></lb-Bar>
    <!-- 人物 -->
    <lb-Figure v-if="$store.state.isMessageDisplay" class="figure"></lb-Figure>
    <!-- 暂停重来按钮 -->
    <div class="icon">
      <div v-if="clickFalse" id="pause" @click="pause()"><i class="el-icon-video-pause"></i></div>
      <div v-else id="play" @click="play()"><i class="el-icon-video-play"></i></div>
      <div id="refresh" @click="refresh()"><i class="el-icon-refresh-right"></i></div>
      <div id="close" @click="close()"><i class="el-icon-circle-close"></i></div>
    </div>
    <!-- 时间轴 -->
    <div style="width: 100%;height: 23%;position: absolute;top: 65%;display: flex;justify-content: center"> 
      <div id = "time" style="width: 80%;height: 100%;">
        <lb-Time></lb-Time>
      </div>
    </div>
    <!-- 进度条 -->
    <div class="progross">
      <div class="total-progross"><div class="current-progross" id="current-progross"></div></div>
      <div class="now-progross"> {{ currentProgress }}</div>
    </div>
  </div>
</template>

<script>
import MapBoxLocus from '@/components/MapBox/MapBoxLocus.vue';
import FigureImage from '@/components/CeShi/FigureImage.vue';
import TimeLine from "@/components/CeShi/TimeLine.vue";
import BarChart from "@/components/CeShi/BarChart.vue";
import { useStore } from "vuex";

export default {
  name: 'CeShiView',
  components: {
    'lb-mapbox': MapBoxLocus,
    'lb-Figure':FigureImage,
    'lb-Time':TimeLine,
    'lb-Bar':BarChart
  },
  data: function() {
    return {
      currentProgress: 0,
      isRouterAlive: true,
      clickFalse: true,
      active_index: 0,
      age: 17,
      eventsList: [
        {
          time: this.store.state.time,
          year: this.store.state.year,
          things: this.store.state.things
        }
      ]
    }
  },
  methods: {
    progrossUpdate(value) {
      if(document.getElementById("current-progross")) {
        document.getElementById("current-progross").style.width = (1+(value/11819)*99)+'%'
      }
      this.currentProgress = String((value/11819)*100).replace(/^(.*\..{2}).*$/,"$1") + '%'
    },
    ageUpdate(time) {
      this.age = (time-1)%700;
    },
    eventsUpdate() {
      let events = {
        time: this.store.state.time,
        year: this.store.state.year,
        things: this.store.state.things
      }
      this.eventsList.push(events)
      this.active_index++;
      this.$refs.messageBox.style.setProperty("--m-top", this.active_index);
      if (this.active_index > this.eventsList.length - 1) {
        this.active_index = 0;
      }
    },
    refresh() {
      this.reload()
      this.store.state.currentRouter = 0
      this.store.state.isMessageDisplay = true
      this.store.state.kilometer = 0
      this.store.state.timeline = 715
    },
    pause() {
      this.store.state.isPause = false;
      this.clickFalse = false;
    },
    play() {
      this.store.state.isPause = true
      this.clickFalse = true;
      this.store.state.time = this.store.state.time
    },
    close() {
      this.store.state.isclose = true
      this.store.state.isMessageDisplay = false
    },
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(()=>{
        this.isRouterAlive = true;
      })
    }
  },
  setup() {
    const store = useStore();
    return { store };
  },
  created() {
    // 监听进度的变化
    this.$store.watch(
      (state) => state.currentProgress,
      (newVal) => {
        // 也可以使用 $store.watch 监听值的变化
        this.currentProgress= newVal; // 更新存储当前值的变量
        this.progrossUpdate(newVal);
      }
    );
    // 监听时间变化
    this.$store.watch(
      (state) => state.time,
      (newVal) => {
        this.time= newVal;
        this.ageUpdate(newVal);
        this.eventsUpdate();
      }
    );
    this.$store.watch(
      (state) => state.timeline,
      (newVal) => {
        this.reload()
        this.store.state.currentRouter = 0
        this.store.state.isMessageDisplay = true
        this.store.state.kilometer = 0
        this.timeline= newVal;
        console.log(this.store.state.timeline)
      }
    );
  },
  mounted() {
    this.store.state.isMessageDisplay = true
  }
}
</script>

<style scoped>
.locus-view {
  position: relative;
  width: 100%;
  height: 100%;
}
.mapbox {
  height: 100%;
  width: 100%;
  opacity: 0.7;
}
.message {
  position: absolute;
  font-family: "楷体";
  font-size: 120%;
  font-weight: 900;
  color: #737cbd;
}
#m1 {
  top: 10%;left:5%;
  width: 20vw;
  height: 7vh;
}
#m2 {
  top: 30%;right:3%;
  width: 30vw;
  height: 30vh;
}
.messageContainer {
  top: 30%;right:3%;
  width: 30vw;
  height: 30vh;
  position: absolute;
  overflow: hidden;
}
.messageBox {
  /* width: 30vw; */
  height: 30vh;
  font-family: "楷体";
  font-size: 120%;
  font-weight: 900;
  color: #737cbd;
  margin-top: calc(-30vh * var(--m-top));
  transition: 1s
}
.messageBox div{
  height: 100%;
  width: 30vw;
}
.figure {
  position: absolute;
  top: 5%;left:38%;
  width: 30vw;
  height: 10vh;
  font-family: "楷体";
  font-size: 120%;
  font-weight: 900;
  color: #4d4b4c;
}
.icon {
  position: absolute;
  top: 5%;right: 4%;
  height: 10vh;
  width: 10vw;
  display: flex;
  font-size: 300%;
  justify-content: center;
}
.progross {
  position: absolute;
  top: 91%;
  height: 1vh;
  width: 100%;
  align-items: center;
  display: flex;
  justify-content: center;
}
.total-progross {
  background: rgb(227, 227, 227);
  height: 90%;
  width: 80%;
  border-radius: 100px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25);
}
.current-progross {
  border-radius: 100px;
  background: linear-gradient(45deg, #faf6d7, #b66c2c);
  height: 100%;
  width: 1%;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25);
}
.now-progross {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 1%;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25);
  font-family: "楷体";
  font-weight: 600;
  background: linear-gradient(45deg, #faf6d7, #b66c2c);
}
</style>